<template>
  <div class="logo">
    <router-link :to="routerLinkTo">
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
<!--      <img v-if="navTheme === 'dark'" src="~@/assets/logo-white.png" alt="logo">-->
<!--      <img v-else src="~@/assets/logo.svg" alt="logo">-->
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->

      <h1 v-if="showTitle">{{ title }}</h1>
    </router-link>
  </div>
</template>

<script>
import { mixin } from '@/utils/mixin.js'

export default {
  name: 'Logo',
  mixins: [mixin],
  props: {
    title: {
      type: String,
      default: '黑龙江省农垦科学院预算系统',
      required: false
    },
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    },
    // 点击Logo跳转地址
    routerLinkTo: {
      type: Object,
      default: () => ({ name: 'dashboard' }),
    },
  }
}
</script>

<style lang="less" scoped>
/*缩小首页布局顶部的高度*/
@height: 59px;
@logoTitleFontSize: 14px; // 标题字体大小（可按需调整：12px/13px/14px）
@logoTitleMarginLeft: 8px; // 标题与logo图片的间距

.sider {
  box-shadow: none !important;

  .logo {
    height: @height !important;
    line-height: @height !important;
    box-shadow: none !important;
    transition: background 300ms;
    padding-left:0px;

    a {
      color: white;
      text-decoration: none; // 去除链接默认下划线
      display: flex; // 弹性布局：确保logo和标题垂直居中对齐
      align-items: center; // 垂直居中
      padding: 0 16px; // 可选：增加左右内边距，优化布局

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }

      // 标题样式优化
      h1 {
        font-size: @logoTitleFontSize;
        margin: 0; // 清除h1默认边距
        margin-left: @logoTitleMarginLeft; // 与logo保持间距
        font-weight: 500; // 中等粗细（比默认粗体柔和）
        white-space: nowrap; // 防止标题换行
      }

      // 图片样式优化（确保与标题对齐）
      img {
        height: 20px; // 可按需调整logo高度
        vertical-align: middle;
      }
    }
  }

  &.light .logo {
    background-color: @primary-color;
  }
}
</style>